<template>
    <div class="root">
        <div class="header">
            <div class="back-icon" @click="returnLast">
                <van-icon name="arrow-left" color="white" size="28px"/>
            </div>
            <div class="notice-text">
                <span>我的通知</span>
            </div>
        </div>
        <div class="notice-wrapper">
            <div class="notice-cell" v-for="notice in noticeArray"> <!-- 这里加v-for -->
                <div class="title-wrapper">
                    <div class="notice-title">
                        <span>您有胶囊待打开</span>
                    </div>
                    <div class="is-red" v-if="notice.read"></div>
                    <div class="is-read" v-if="!notice.read">已读</div>
                </div>
                <div class="notice-time">
                    <span>{{ notice.createdAt }}</span>
                </div>
                <div class="read-btn" v-if="notice.read">
                    <span @click="markNotice(notice.id)">标记为已读</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { getNotice, readNotice } from '../request/api';
import { onMounted, ref } from 'vue';
import { useRouter } from "vue-router";
import { ElLoading } from 'element-plus';
interface Options {
    lock: boolean,
    text: string,
    background: string,
}
const options: Options = {
    lock: true,
    text: "Loading...",
    background: 'rgba(0,0,0,0.7)'
}
interface NoticeArray {
    content: null|string,
    createdAt: string,
    id: string,
    read: number,
    type: string,
    uid: string,
}
const router = useRouter();
const noticeArray = ref<NoticeArray[]>([]);
const returnLast = () => {
    router.go(-1);
}
const markNotice = (id: string) => {
    readNotice({id: id}).then((res:any) => {
        console.log(res);
        if (res.error_code == 0) {
            let loading = ElLoading.service(options);
            getNotice().then((res) => {
                noticeArray.value = res.result;
                loading.close();
            })
        }
    })
}
onMounted(() => {
    getNotice().then((res) => {
        console.log(res);
        noticeArray.value = res.result;
    })
})
</script>

<style lang="less" scoped>
.root{
    height: 100%;
    background-color: #5ccdc8;
    display: flex;
    flex-direction: column;
    .header {
        display: flex;
        padding-top: 20px;
        padding-left: 20px;
        .notice-text {
            margin-left: 4px;
            line-height: 28px;
            color: white;
            font-size: 18px;
        }
    }
    .notice-wrapper {
        display: flex;
        flex-direction: column;
        .notice-cell {
            display: flex;
            flex-direction: column;
            width: 90%;
            margin: 0 auto;
            margin-top: 10px;
            border-radius: 10px;
            background-color: #fff;
            background: linear-gradient(to right bottom, rgba(255,255,255,0.4), rgba(255,255,255,0.2));
            z-index: 1;
            box-shadow: 0 0 1rem rgba(255, 255, 255, 0.1);
            .title-wrapper {
                display: flex;
                margin: 10px 10px 8px 10px;
                .notice-title {
                    color: #fff;
                    font-size: 16px;
                    font-weight: bold;
                }
                .is-red {
                    width: 7px;
                    height: 7px;
                    background: red;
                    border-radius: 100%;
                    margin-left: 7px;
                    align-self: center;
                }
                .is-read {
                    font-size: 16px;
                    color: gray;
                    border: 2px solid gray;
                    margin-left: 7px;
                    align-self: center;
                }
            }
            .notice-time {
                margin: 0px 10px 8px 10px;
                color: white;
                font-size: 14px;
            }
            .read-btn {
                margin: 0px 10px 8px 10px;
                color: rgb(82, 103, 187);
                font-size: 14px;
                font-weight: bold;
                span {
                    display: inline-block;
                    cursor: pointer;
                    text-decoration: underline;
                }
            }
        }
    }
}
</style>